<template>
    <view class="zz-container zz-container_wallet_recharge">
        <!-- 概览数据 -->
        <view 
            class="main"
            :style="[{'background-color':`${themeStyles.mainColor}`},{'box-shadow':`${themeStyles.shadowCss}`}]">
            <!-- 背景 -->
            <image 
                class="zz-img-fit bg"
                :src="baseTemplateFileUri + 'image/user/title_bg.png'"></image>
            <!--  -->
            <view class="main_content">
                <view class="zz-mb12 fs28 lh40 colorFFF">余额</view>
                <view class="fs64 fs-bold lh78 colorFFF">¥ {{balance}}</view>
            </view>
        </view>
        <!-- 选择充值金额 -->
        <view class="zz-flex zz-ff-rw zz-jc-sb">
            <!-- <view 
                class="zz-mb32 zz-btn zz-btn_recharge zz-btn_style1"
                :style="themeStyles.btnSelected">充1000送200</view> -->
            <view 
                v-for="(item,index) in giveListData"
                :key="index"
                :style="index===giveType&&themeStyles.btnSelected"
                class="zz-mb32 zz-btn zz-btn_recharge zz-btn_style1 clamp"
                @click="selectGiveType(index,item)">{{item.title}}</view>
        </view>
        <!-- 输入充值金额  -->
        <keyboard-input
            v-if="addKeyboardInput"
            type="number"
            placeholder="自定义金额（输入1～99999的整数）"
            :maxLength="maxNum.length"
            @user-input="insertFillMoneyNum"></keyboard-input>
        <!-- 底部按钮区域 -->
        <view class="footer footer_ye">
            <button 
                type="primary"
                class="btn size full"
                :style="themeStyles.btnFullColor"
                @click="rechargeNow">立即支付</button>
        </view>
		<!-- 提示弹层 -->
		<notice
            title="恭喜您充值成功"
            :visible="noticeVisible"
            @close="noticeVisible=false">
            <!--  -->
            <view slot="body">
                <view class="zz-flex zz-jc-c zz-mb74">
                    <text 
                        :style="themeStyles.textMainColor"
                        class="fs128 template__icon template_icon-recharge-suc"></text>
                </view>
            </view>
            <!--  -->
            <view slot="footer">
                <view 
                    @click="backToBalance"
                    :style="themeStyles.btnPrimary"
                    class="zz-btn zz-btn_large">确定</view>
            </view>
        </notice>
    </view>
</template>
<script>
const app = getApp();
/* api -------- begin */
/* 获取钱包详情 */
import { 
    _moneyGiveList, //获取充值选项
    _fillMoney,  //充值
    _getWallet   //获取钱包余额和积分
} from "@/lib/api/walletServer/info"; 
/* api --------end */
/* mixins */
import payMixin from "@/mixins/pay";
/* 输入框 */
import keyboardInput from "@/components/keyboardInput";
/* 提示弹层 */
import notice from "@/components/notice";
/* vuex */
import { mapState,mapMutations } from "vuex";
export default {
    mixins:[
        payMixin  //支付相关
    ],
    components:{
        keyboardInput,
        notice  
    },
    computed:{
        ...mapState("wallet",["balance"])
    },
    data(){
        return {
            fillMoneyNum:"",  //充值金额
            maxNum:"99999"/* 99999 */, //
            noticeVisible:false,  //提示弹层显示隐藏
            giveType:"",  //所选的充值选项
            giveListData:[]  //充值选项数据
        }
    },
    created(){
        //
        //console.log(this.baseShopId);
        //console.log(this.userInfo);
    },
    onLoad(option){
        
    },
    async onShow(){
        //从余额页点击充值按钮跳转来
        if(app.globalData.fromRechargeBtnToRechargePage){
            app.globalData.fromRechargeBtnToRechargePage = false;
            //
            app.globalData.fromRechargePageToRechargeBtn = true;
        }
        // 从余额页二维码付款余额不足跳转来
        if(app.globalData.fromQrcodeFillMoneyToRechargePage){
            app.globalData.fromQrcodeFillMoneyToRechargePage = false;
            //
            app.globalData.fromRechargePageToQrcodeFillMoney = true;
        }
        //从支付页跳转来
        //console.log("app.globalData.fromPaypopToRecharge",app.globalData.fromPaypopToRecharge);
        //
        const res = await _moneyGiveList();
        /* 
            moneyGive  赠送金额
            moneyLevel 充值金额
            title  标题
        */
        console.log(res);
        this.giveListData = null;
        this.giveListData = res.data;
    },
    methods:{
        ...mapMutations("wallet",["setBalance","setIntegral"]),
        /* 充值成功跳转回余额页面 */
        backToBalance(){
            this.noticeVisible = false;
            //
            uni.navigateBack();
        },
        /* 选择充值类别 */
        selectGiveType(index,item){
            this.giveType = index;
            //清空输入金额并禁用
            (this.fillMoneyNum)&&(this.fillMoneyNum = "");
            //
            this.addKeyboardInput = false;
            //
            this.$api.showToast(`${item.title}`);
            //
            this.ZZsetTimeout(()=>{
                this.addKeyboardInput = true;
            },0);
        },
        /* 输入充值金额 */
        insertFillMoneyNum(value){
            //console.log(value);
            //清除选中
            this.giveType = "_";
            //console.log(this.giveType);
            //let { value } = e.detail;
            if(!value)return;
            this.fillMoneyNum = value;
            let regx = /^[1-9]\d?/;
            //首位不能为0
            if(!regx.test(value)){
                this.fillMoneyNum = "1";
            }
            //console.log(value*1>this.maxNum);
            if(value*1>this.maxNum*1){
                //console.log(value*1);
                //console.log(this.maxNum);
                this.fillMoneyNum = `${this.maxNum}`;
            }
        },
        /* 立即充值 */
        async rechargeNow(){
            //
            if(!this.fillMoneyNum&&this.giveType==="_"){
                this.$api.showModal({
                    content:`请选择充值类别或输入充值金额`
                })
                return;
            }
            //充值金额
            let fillMoney;
            //自定义输入的金额
            (this.fillMoneyNum!=="")&&(fillMoney = this.fillMoneyNum);
            //选择充值类别
            (this.giveType!=="_")&&(fillMoney = this.giveListData[this.giveType].moneyLevel);
            // console.log(this.fillMoneyNum);
            // console.log(this.giveType);
            // console.log(fillMoney);
            // return;
            //
            try {
                /* 获取充值支付参数 */
                const fmRes = await _fillMoney({
                    money:fillMoney
                });
                //console.log(fmRes);
                const payData = fmRes.data;
                /* 调起微信支付 */
                const paymentRes = await this.payment(payData);
                //console.log(paymentRes);
                /* 获取钱包余额 */
                const walletData = await _getWallet();
                let {
                    creditTotal = 0,  //积分
                    moneyTotal = 0    //余额
                } = walletData.data;
			    this.setIntegral(creditTotal);
                this.setBalance(moneyTotal);
                /* 提示弹层 */
                this.noticeVisible = true;
            } catch (error) {
                console.log(error);
                //
                /* if(error.errMsg){
                    this.$api.showModal({
                        content:`${error.errMsg}`,
                        showCancel:false
                    })
                } */
                this.$api.showModal({
                    content:`支付失败`,
                    showCancel:false
                })
            }
        }
    },
    watch:{
        /* fillMoneyNum(val){
            console.log(val);
        } */
    }
}
</script>
<style lang="scss">
/*  */
@import "@/common/styles/order/order.scss";
/*  */
.zz-container_wallet_recharge {
    height:120vh;
    padding:68rpx 48rpx 0rpx;
    /*  */
    .main {
        position:relative;
        height:242rpx;
        margin-bottom:68rpx;
        padding:56rpx 0rpx 0rpx 60rpx;
        border-radius:6rpx 48rpx 6rpx 6rpx;
        .bg {
            position:absolute;
            top:0;
            left:0;
        }
        &_content {
            position:relative;
        }
    }
    /*  */
}
</style>